import { create } from "zustand";
import { CSSProperties } from "react";
import {ComponentUnitType} from "./edit-pages-store";
import Container from "@/pages/lowCodeEditorPlus/materialItems/layout/Container";
import Page from "@/pages/lowCodeEditorPlus/materialItems/construction/Page";
import Modal from "@/pages/lowCodeEditorPlus/materialItems/construction/Modal";
import Button from "@/pages/lowCodeEditorPlus/materialItems/function/Button";
import { Component } from "./edit-pages-store";
import Table from "@/pages/lowCodeEditorPlus/materialItems/dataContainer/Table";
import TableColumn from "@/pages/lowCodeEditorPlus/materialItems/dataContainer/TableColumn";
import Pagination from "@/pages/lowCodeEditorPlus/materialItems/exhibition/Pagination";
import Form from "@/pages/lowCodeEditorPlus/materialItems/dataContainer/Form";
import FormItem from "@/pages/lowCodeEditorPlus/materialItems/dataContainer/FormItem";
import TableOperationColumn from "@/pages/lowCodeEditorPlus/materialItems/dataContainer/TableOperationColumn";
export interface ComponentSetter {
  name: string;
  label: string;
  type: string;
  defaultValue?: any;
  siblings?: ComponentSetter[];
  siblingsShowValue?: string;
  [key: string]: any;
}
export interface ComponentEvent {
  name: string;
  label: string;
}

export interface ComponentMethod {
  name: string;
  label: string;
}

export type AcceptType<T extends ComponentUnitType> = {
  [K in T]: string[];
};
export interface ComponentConfig {
  name: string;
  defaultProps: Record<string, any>;
  desc: string;
  alias: string;
  setter?: Array<{key: string, label: string, children: ComponentSetter[]}>;
  basicStyleSetter?: ComponentSetter[];
  cooptedStyleSetter?: ComponentSetter[];
  events?: ComponentEvent[];
  methods?: ComponentMethod[];
  dev: any;
  prod: any;
  defaultStyles?: CSSProperties;
  getBody?: (id: string)=>Component[];//用于组成式组件，类似表格区
  getFooter?: (id: string)=>Component[];//用于组成式
  accept?: AcceptType<ComponentUnitType>;
  defaultEditRegion?: ComponentUnitType; //默认的子单位，没有设置一般默认为body
}
export interface MenuItem {
  key: string;
  label: string;
  children: {
    [key: string]: ComponentConfig;
  };
}
interface State {
  componentConfig: MenuItem[];
  flatComponentConfig: ()=> Record<string, ComponentConfig>;
}

interface Action {
  // registerComponent: (name: string, componentConfig: ComponentConfig) => void;
}
export const useComponentConfigStore = create<State & Action>((set,get) => ({
  componentConfig: [
    {
      key: "construction",
      label: "结构容器",
      children: { Page, Modal },
    
    },
    {
      key: "layout",
      label: "布局容器",
      children: { Container },
    },
    {
      key: "function",
      label: "功能",
      children: { Button },
    },
    {
      key: "dataContainer",
      label: "数据容器",
      children: { Table, TableColumn, TableOperationColumn, Form, FormItem },
    },
    // {
    //   key: "exhibition",
    //   label: "展示",
    //   children: { Pagination },
    // },
  ] as MenuItem[],
  flatComponentConfig:()=>{
    return get().componentConfig.map(item => item.children).reduce((acc, curr) => ({ ...acc, ...curr }), {})
  }
}));

export function getComponentConfByName(name: string|null|undefined, componentConfig: MenuItem[]) {
  if(!name)return null
  const obj = componentConfig.map(item => item.children).reduce((acc, curr) => ({ ...acc, ...curr }), {})
  return obj[name] || null
}
